<template>
	<!-- #ifdef H5 -->
	<view class="header">
		<view class="serch-wrapper flex acea-row row-between-wrapper">
			
			<view v-if="logoImg" class="logo-img skeleton-rect">
				<image :src="logoImg" mode=""></image>
			</view>
			
			<!-- <view v-if ="shopName" class="logo-title skeleton-rect">
				{{shopName}}
			</view> -->
			<!-- <navigator url="/pages/columnGoods/goods_search/index" class="input skeleton-rect" hover-class="none">
				<text class="iconfont icon-xiazai5"></text>
				搜索商品
			</navigator> -->
			
			<view class="input skeleton-rect" @click="clickSearch">
				<text class="iconfont icon-xiazai5"></text>
				搜索科室
			</view>
			
		</view>
	</view>
	<!-- #endif -->
	<!-- #ifdef MP || APP-PLUS -->
	<view>
		<view class="mp-header">
			<view class="sys-head skeleton-rect" :style="{ height: statusBarHeight }"></view>
			<view class="serch-box skeleton-rect" style="height: 43px;">
				<view class="serch-wrapper flex">
					<view v-if="logoImg" class="logo-img skeleton-rect">
						<image :src="logoImg" mode=""></image>
					</view>
					<!-- <view v-if="shopName" class="logo skeleton-rect">
						{{shopName}}
					</view> -->
					
					<!-- <navigator url="/pages/columnGoods/goods_search/index" hover-class="none" class="input skeleton-rect">
						<text class="iconfont icon-xiazai5"></text>
						搜索商品
					</navigator> -->
					
					<view class="input skeleton-rect" @click="clickSearch">
						<text class="iconfont icon-xiazai5"></text>
						搜索科室
					</view>
					
				</view>
			</view>
		</view>
		<view :style="'height:'+marTop+'px;'"></view>
	</view>
	<!-- #endif -->
</template>

<script>
	let statusBarHeight = uni.getSystemInfoSync().statusBarHeight * 2 + 'rpx';
	import {
		mapGetters
	} from 'vuex';
	export default {
		name: 'homeNavi',
		props: {
			shopName: {
				type: String,
				default: ''
			},
			logoUrl:{
				type:String,
				default:'',
			}
		},
		computed: {
			...mapGetters(['viewColor', 'isLogin']),
		},
		watch:{
			logoUrl(){
				this.logoImg = this.logoUrl;
			}
		},
		data() {
			return {
				statusBarHeight: statusBarHeight,
				marTop: 0,
				searchH: 0,
				logoImg:'',
			};
		},
		mounted() {
			let that = this;
			// #ifdef H5
			// 获取H5 搜索框高度
			setTimeout(() => {
				let appSearchH = uni.createSelectorQuery().select('.serch-wrapper');
				appSearchH
					.boundingClientRect(function(data) {
						if(data){
							that.searchH = data.height || 0;
						}
					})
					.exec();
			}, 800);
			// #endif
			// #ifdef MP || APP-PLUS
			setTimeout(() => {
				// 获取小程序头部高度
				let info = uni.createSelectorQuery().in(this).select(".mp-header");
				info.boundingClientRect(function(data) {
					that.marTop = data.height
				}).exec()
			}, 100)
			// #endif
		},
		methods: {
			clickSearch(){
				if (!this.isLogin) {
					this.$emit('goLogin');
					return
				}
				
				uni.navigateTo({
					url: '/pages/shops/subs_appointment/appointment',
					fail: (res) => {
						console.log('res'+JSON.stringify(res))
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.header {
		width: 100%;
		background: $yy-main-col;
		.serch-wrapper {
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-evenly;
			align-items: center;
			padding: 20rpx 0rpx 20rpx 0rpx;
			color: #fff;
			.logo-title {
				//width: 127rpx;
				max-width: 300rpx;
				min-width: 200rpx;
				height: 46rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.logo-img {
				width: 127rpx;
				height: 46rpx;
			}
			image {
				width: 118rpx;
				height: 42rpx;
			}
			.input {
				max-width: 550rpx;
				min-width: 450rpx;
				line-height: 64rpx;
				border-radius: 32rpx;
				padding: 0 0 0 30rpx;
				background: #73DDAD;
				font-size: 28rpx;

				.iconfont {
					margin-right: 20rpx;
				}
			}

		}

	}

	/* #ifdef MP || APP-PLUS */
	.mp-header {
		z-index: 999;
		background: $yy-main-col;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		/* #ifdef H5 */
		padding-bottom: 20rpx;
		/* #endif */

		.serch-wrapper {
			height: 100%;
			align-items: center;
			// padding: 0 50rpx 0 53rpx;
			color: #fff;
			
			/* #ifdef APP-PLUS */
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-evenly;
			/* #endif */
			
			.logo-title {
				//width: 127rpx;
				/* #ifndef APP-PLUS */
				width: 200rpx;
				/* #endif */
				/* #ifdef APP-PLUS */
				max-width: 300rpx;
				min-width: 200rpx;
				/* #endif */
				height: 46rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			.logo-img {
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 0 30rpx;
				width: 127rpx;
				height: 46rpx;
			}
			image {
				width: 118rpx;
				height: 42rpx;
			}
			
			.input {
				display: flex;
				align-items: center;
				/* #ifndef APP-PLUS */
				width: 335rpx;
				font-size: 16rpx;
				/* #endif */
				/* #ifdef APP-PLUS */
				flex: 1;
				// max-width: 560rpx;
				// min-width: 450rpx;
				margin-right: 30rpx;
				/* #endif */
				
				height: 58rpx;
				padding: 0 0 0 20rpx;
				background-color: #73DDAD;
				border-radius: 29rpx;
				font-size: 28rpx;

				.iconfont {
					margin-right: 10rpx;
				}
			}
		}
	}

	/* #endif */
</style>
